<template>
  <div :ref="top">
    <!-- <header>
      <span class="iconfont icon-fanhui" @click="back">
      </span><span>火爆餐厅</span>
    </header> -->
    <div class="content">
      <div class="select">
        <div
          v-for="(item,index) in list"
          :key='index'
          @click="changeShow($event,index)"
          :class="index===red?'active':''"
        >
          {{item}}
        </div>

      </div>
      <div class="list">
        <dl
          class="shop"
          v-for="item in list2"
          :key='item'
          @click="toDetail(item.manageShopID)"
        >
          <navigator :url="`/pages/detail/detail?id=${item.shopID}`">
            <dt><img
                :src="item.logo"
                alt=""
              ></dt>
            <dd>
              <h3>{{`${item.shopName}`}}</h3>
              <p><i
                  :class="item.avgReview>=index?'iconfont icon-start active':'iconfont icon-start'"
                  v-for='(it,index) in star'
                  :key='index'
                ></i><span>{{`￥${item.avgPrice}/人`}}</span>
              </p>
              <p><span>{{item.styleCooking}}</span><span>{{`${(item.distance/1000).toFixed(2)}km`}}</span></p>
              <p v-show='item.youpuFullName'>
                <span>{{item.youpuFullName}}</span>
              </p>
            </dd>
          </navigator>

        </dl>
      </div>
      <div class="loading">加载中...</div>
      <div
        class="mask"
        v-show="isShow"
      >
        <div
          v-show="dindex===0"
          class="tab"
        >
          <div class="left">
            <div
              :class="index===lindex?'listnode active':'listnode' "
              v-for='(item,index) in DistrictList'
              :key='item.id'
              @click="changeColor(item,index)"
            >
              {{item.name}}
            </div>
          </div>
          <div class="right">
            <div
              v-for='ite in list1'
              :key='ite'
              class="listnode"
              @click="getList(ite)"
            >{{ite.name}}</div>
          </div>
        </div>
        <div
          v-show="dindex===1"
          class="tab"
        >2</div>
        <div
          v-show="dindex===2"
          class="tab"
        >3</div>
        <div
          v-show="dindex===3"
          class="tab"
        >4</div>
      </div>
    </div>

  </div>

</template>

<script>
import "../fonts/iconfont.css";
import {
  getDistrictList,
  getfiltercontent,
  getListDate
} from "../service/modules/fire";

export default {
  data() {
    return {
      isTop: false,
      DistrictList: [],
      isShow: false,
      list: ["附近", "全部菜系", "智能排序", "筛选"],
      dindex: 0,
      lindex: 0,
      list1: [],
      list2: [],
      star: [1, 2, 3, 4, 5],
      red: 0,
      page: 1
    };
  },
  methods: {
    toDetail(id) {},
    back() {
      uni.navigateBack();
    },
    changeShow(e, index) {
      this.isShow = true;
      this.dindex = index;
      this.isTop = !this.isTop;
      if (this.isTop) {
        uni.pageScrollTo({
          scrollTop: e.changedTouches[0].pageY - 80
        });
      } else {
        this.isShow = false;
      }
    },
    changeColor(item, index) {
      this.lindex = index;
      this.list1 = item.bc;
    },
    async getList(ite) {
      let res = await getListDate({
        page: 1,
        pageSize: 20,
        cityId: 19,
        longitude: 116.29290008544922,
        latitude: 40.03954315185547,
        type: "all",
        bcidName: ite.name,
        bcid: ite.id,
        mwAuthToken:
          "uPCQvKl9RhX5r9SGP2noD0Ei0D3egOAN8IrKQ9lIY-BS0nZ8NKqZIMOel3oNkoUYqtPCSKhwebLrgjfpX-CQWJIcZYXmpdLdIF3rNSY-BJe8dSyjtMBhBHk20pqzLLrwWAX-Cq4yzX-ChX-Csk9vBdT1EflbSDPNZFGgxBc5VnC14kzL8imwH7UY-BgBh0Yhgu8NUZXa5Gthb4rm1u2ZIbmPpChaX-Ce3QuHcg-Z-Z",
        fromw: 1401
      });
      this.isShow = false;
      if (res) {
        this.list2 = res.data.shops;
      }
    }
  },
  async onReachBottom() {
    this.page += 1;
    let res = await getListDate({
      page: this.page,
      pageSize: 20,
      cityId: 19,
      longitude: 116.29290008544922,
      latitude: 40.03954315185547,
      type: "all",
      mwAuthToken:
        "uPCQvKl9RhX5r9SGP2noD0Ei0D3egOAN8IrKQ9lIY-BS0nZ8NKqZIMOel3oNkoUYqtPCSKhwebLrgjfpX-CQWJIcZYXmpdLdIF3rNSY-BJe8dSyjtMBhBHk20pqzLLrwWAX-Cq4yzX-ChX-Csk9vBdT1EflbSDPNZFGgxBc5VnC14kzL8imwH7UY-BgBh0Yhgu8NUZXa5Gthb4rm1u2ZIbmPpChaX-Ce3QuHcg-Z-Z",
      fromw: 1401
    });
    if (res) {
      this.list2 = this.list2.concat(res.data.shops);
    }
  },

  async created() {
    let res = await getfiltercontent({
      cityId: 19,
      mwAuthToken:
        "uPCQvKl9RhX5r9SGP2noD0Ei0D3egOAN8IrKQ9lIY-BS0nZ8NKqZIMOel3oNkoUYqtPCSKhwebLrgjfpX-CQWJIcZYXmpdLdIF3rNSY-BJe8dSyjtMBhBHk20pqzLLrwWAX-Cq4yzX-ChX-Csk9vBdT1EflbSDPNZFGgxBc5VnC14kzL8imwH7UY-BgBh0Yhgu8NUZXa5Gthb4rm1u2ZIbmPpChaX-Ce3QuHcg-Z-Z",
      mAuthToken:
        "uPCQvKl9RhX5r9SGP2noD0Ei0D3egOAN8IrKQ9lIY-BS0nZ8NKqZIMOel3oNkoUYqtPCSKhwebLrgjfpX-CQWJIcZYXmpdLdIF3rNSY-BJe8dSyjtMBhBHk20pqzLLrwWAX-Cq4yzX-ChX-Csk9vBdT1EflbSDPNZFGgxBc5VnC14kzL8imwH7UY-BgBh0Yhgu8NUZXa5Gthb4rm1u2ZIbmPpChaX-Ce3QuHcg-Z-Z",
      fromw: 1401
    });
    if (res) {
      // console.log(res.data.areas, '---------------------')
      this.DistrictList = res.data.areas;
    }
    let res1 = await getListDate({
      page: 1,
      pageSize: 20,
      cityId: 19,
      longitude: 116.29290008544922,
      latitude: 40.03954315185547,
      type: "all",
      mwAuthToken:
        "uPCQvKl9RhX5r9SGP2noD0Ei0D3egOAN8IrKQ9lIY-BS0nZ8NKqZIMOel3oNkoUYqtPCSKhwebLrgjfpX-CQWJIcZYXmpdLdIF3rNSY-BJe8dSyjtMBhBHk20pqzLLrwWAX-Cq4yzX-ChX-Csk9vBdT1EflbSDPNZFGgxBc5VnC14kzL8imwH7UY-BgBh0Yhgu8NUZXa5Gthb4rm1u2ZIbmPpChaX-Ce3QuHcg-Z-Z",
      fromw: 1401
    });
    if (res1) {
      this.list2 = res1.data.shops;
    }
  }
};
</script>

<style lang='scss' scoped>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

header {
  width: 100%;
  padding-top: 56rpx;
  display: flex;
  align-items: center;
  height: 80rpx;
  padding-left: 20rpx;
  margin-bottom: 40rpx;
  span {
    margin-right: 20rpx;
  }
}
.content {
  width: 100%;
  position: relative;
  .select {
    display: flex;
    justify-content: space-around;
    font-size: 30rpx;
    .active {
      color: red;
    }
  }
  .loading {
    text-align: center;
    height: 60rpx;
  }
  .list {
    width: 100%;
    background: #eee;
    .shop {
      navigator {
        width: 100%;
        background: #fff;
        margin: 10rpx 0;
        padding: 20rpx 0;
        display: flex;
      }
      dt {
        width: 30%;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
        img {
          width: 80%;
          height: 80%;
        }
      }
    }
    dd {
      width: 70%;
      h3 {
        font-weight: bold;
      }
      p {
        font-size: 24rpx;
        color: #ccc;
        margin: 20rpx 0;
        .active {
          color: orange;
        }
        i {
          display: inline;
        }
        span {
          margin-right: 50rpx;
        }
      }
    }
  }
  .mask {
    width: 100%;
    height: 2000rpx;

    background: rgba(0, 0, 0, 0.5);
    position: absolute;
    top: 50rpx;
    left: 0;
    font-size: 32rpx;
    .tab {
      width: 100%;
      height: 600rpx;
      background: #eee;

      .left {
        width: 50%;
        height: 100%;
        background: #fff;
        overflow: scroll;
        float: left;
        .active {
          background: #eee;
          color: red;
        }
        .listnode {
          padding: 20rpx 20rpx;
        }
      }
      .right {
        width: 50%;
        height: 100%;
        float: right;
        overflow: scroll;
        .listnode {
          padding: 20rpx 20rpx;
        }
      }
    }
  }
}
</style>